<template>
    <div>
      <el-dialog
        title="订单状态"
        :visible.sync="dialogTableVisible"
        :close-on-click-modal="false"
        @close="closeDiog"
        width="70%"
      >
   
        <div class="current">
          <div>当前订单状态：待付款</div>
          <div class="ridis">
            <div class="but1">通过</div>
          <div class="but2">拒绝</div>
          </div>
          
        </div>
        <div class="extent">充值信息</div>
        <el-table
          :data="dataList.list"
          border
          style="width: 100%"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          :span-method="arraySpanMethod"
        >
          <el-table-column prop="blockchain" label="订单编号" width="200" />
          <el-table-column prop="denomName" label="用户账号" width="200" />
          <el-table-column prop="dawName" label="用户昵称" width="200" />
          <el-table-column prop="denomId" label="订单来源" width="200" />
          <el-table-column prop="denomId" label="支付状态" width="200" />
          <el-table-column prop="denomId" label="支付方式" width="200" />
        </el-table>
        <div class="extent">服务单信息</div>
        <el-table
      style="width: 100%"
      :data="getValues"
      :show-header="false"
      border
    >
      <el-table-column
        v-for="(item, index) in getHeaders"
        :key="index"
        :prop="item"
      >
      </el-table-column>
    </el-table>




   
     
      </el-dialog>
    </div>
  </template>
    <script>
  export default {
    props: ["itemInOf"],
  
    data() {
      return {
        headers: [
      {
        prop: 'date',
        label: '日期',
      },
      {
        prop: 'name',
        label: '姓名',
      },
      {
        prop: 'address',
        label: '地址',
      },
    ],
    tableData: [
      {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }
  
    ],
        dataList: [],
        dialogTableVisible: false,
        rechargeList: [],
        operationList: [],
        dawInfo: {
          dawNameId: "",
          count: "",
          dawName: "",
          denomName: "",
        },
  
        stepsStatus: 1,
        // 查询的参数
        pageQuery: {
          pageSize: 10,
          pageNum: 1,
          dawName: "",
        },
        dataForm: {},
        //返回的参数
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10, // 每页显示多少条
        },
  
        toViewShow: false,
        castingShow: false,
        // castingManyShow: false,
        addOrUpdateVisible: false,
        destructionShow: false,
      };
    },
    computed: {
    getHeaders() {
    return this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
  },
  getValues() {
    return this.headers.map(item => {
      return this.tableData.reduce((pre, cur, index) => Object.assign(pre, {['value' + index]: cur[item.prop]}), {'title': item.label,});
    });
  }
      // stepsStatus: function () {
      //   if (this.dataForm.finallyTime) {
      //     return 4
      //   }
      //   if (this.dataForm.dvyTime) {
      //     return 3
      //   }
      //   if (this.dataForm.payTime) {
      //     return 2
      //   }
      //   if (this.dataForm.createTime) {
      //     return 1
      //   }
      // }
    },
  
    methods: {

      //关闭铸币申请弹窗
      closeDiog() {
        this.fileList = [];
      },
      init() {
        this.dialogTableVisible = true;
        this.$nextTick(() => {});
      },
      openApplyCoinage() {},
    },
  };
  </script>
    <style>
  /* 去掉全选按钮 */
  .el-table .disabledCheck .cell .el-checkbox__inner {
    display: none !important;
  }
  
  .el-table .disabledCheck .cell::before {
    content: "选择";
    text-align: center;
    line-height: 10px;
  }
  .block {
    margin-top: 30px;
  }
  .head {
    display: flex;
  }
  .right {
    width: 700px;
    height: 140px;
    display: flex;
    flex-wrap: wrap;
    margin-left: 50px;
  }
  .hight {
    width: 400px;
    height: 140px;
    display: flex;
    flex-wrap: wrap;
    margin-left: 110px;
  }
  .dams {
    width: 400px;
  }
  .extent {
    width: 100%;
    height: 50px;
    background-color: #d7d7d7;
    line-height: 50px;
    font-size: 16px;
    margin-bottom: 20px;
    padding: 0 20px;
  }
  .current {
    width: 100%;
    height: 70px;
    background-color: #fff;
    line-height: 70px;
    font-size: 16px;
    padding: 0 20px;
    color: red;
    border: 1px solid #000;
    display: flex;
  }
  .ridis{
    display: flex;
        margin-left: 900px;
  }
  .ridis .but1{
    width: 70px;
    background-color:#169BD5;
    height: 40px;
    line-height: 40px;
    margin-top: 15px;
    text-align: center;
    margin-right: 10px;
    color: #fff;
border-radius: 5px;
  }
  .ridis .but2{
    width: 70px;
    background-color: #AAAAAA;
    height: 40px;
    line-height: 40px;
    margin-top: 15px;
    text-align: center;
    color: #fff;
    border-radius: 5px;

  }


  </style>
    